Image Sizing: Side-by-Side Comparison

Sizing an image on a page needs to be done for the most part by sizing the image first and then setting that size within the web page "<img>" tag. Merely declaring the display size in the IMG tag always reduces the quality of the image. Within a small amount of image-size change this is not noticeable so it doesn't matter. But a larger change in image size really requires a smaller or larger image to display otherwise you lose quality.

Two Commonly Mistaken Ideas About Sizing Images

1
Wrong: Large picture files are needed because more information (more data, more file size) means more quality.
Right: What really happens is less quality. - That is because the browser, to show a large picture at the declared display size, after downloading the large file, whacks and slices and chops and basically vandalizes the large file until it trims it down to a smaller number of pixels which it displays. In terms of quality it means you just lost creative control to a senseless robot over the way your image looks.

2
Wrong: Sizing the picture in a WYSIWYG editor like Dreamweaver or FrontPage or Expression Web sends that smaller sized picture to your customer/visitor
Right: What really happens is that the original large file is delivered, all its original pixels with long download times. Sizing a picture in the editor doesn't size the picture file, it only sets up the amount of screen real estate the browser is to use to show the picture. Once that entire large file gets to the browser is it sized by the browser to fit the assigned space in pixels. The browser has to throw away pixels (or add them) to meet the display size.

Two points about picture size.
1 - For the best looking picture at any size on a web page, make a web version of the picture at the intended display size and tweak the picture to look its best at that size
2 - Assign a set display size in HTML for the picture. This will tell the browser how much height and width to use on the page which in turn keeps the browser from having to re-arrange the page as it "realizes" what the size is for each image.

The three image files are used for this example:
1 - redvTango_7048a_p.jpg at 335 x 504 pixels, 43 kb
2 - redvTango_7048a_w.jpg at 171 x 257 pixels, 15 kb
3 - redvTango_7048a_t.jpg at 80 x 120 pixels, 4 kb

The first (largest) image is used three times: first at its full size then at two smaller size settings. This is done by changing the display size in the IMG tag. The smaller display sizes for the big image are set to match the actual sizes of the two smaller-sized images. This way we can do a side-by-side comparison.

The picture below is from Tango night at The Red Vine at 18th and Highland (Jazz District) in Kansas City, MO. David and Laura are the dancers. And no, this was not posed. They were actually moving and this does use a tripod because this was shot at somewhere around 1/15th of a second (look at the blur in Laura's hand). Sadly, the Red Vine closed in 2007.
Original	Original - redvTango_7048a_p.jpg 1200x1800 pixels, 340 kb to download NOTE: The original jpeg filesaze was 6.9 megabytes and the image was 3875x2592 pixels. I am using a downsized version at 1200x1800 in order to make the illustration work. At this lower but still large size this is not unsimilar in file size to many too-large images used on websites.
	Same picture file with different display-size settings	Separate pictures resized and tweaked for each size
	Pictures Below in this column are all from the same larger file seen above. The only change is in the width and height setting in the HTML Page. This leaves the appearance of the final display up to the way the browser discards pixels. As you should be able to see, both sharpness and brightness are lost.	Pictures below in this column were resized in Photoshop to their display size and then tweaked to look their best (clearest) at each display size.
"Proof / Web" Size	Original picture as above: a tad dark and less distinct than the picture at the right ReSet in HTML to: 335 x 504 pixels From full size (still) 1200x1800 and 340 kb to download	redvTango_7048a_p.jpg Actual 335 x 504 pixels, 43 kb Edited in Photoshop
"Web" size	Original picture as above: a tad darker and less distinct than the picture at the right ReSet in HTML to: 171 x 257 pixels From full size (still) 1200x1800 and 340 kb to download	redvTango_7048a_w.jpg - Smaller Version Actual 171 x 257 pixels, 15 kb Edited in Photoshop
Thumbnail size	Original picture as above: again a bit darker and less distinct than the picture at the right ReSet in HTML to: 80 x 120 pixels From full size (still) 1200x1800 and 340 kb to download	redvTango_7048a_t.jpg - Smallest Version Actual 80 x 120 pixels, 4 kb Edited in Photoshop

 

There is a long-standing erroneous statement we need to kill now.

Larger file size does not mean better display quality. Often the look is degraded.

The technical reasons differ between printing a picture using a chemical darkroom, on paper, for halftone display versus displaying a digital picture in a browser. Still, we can formulate a rule covering both types of image for getting the best image in the reproduction of either.
1 - Always start with the largest source file (or the orignal negative) - the one with the most detail.
2 - Create a copy of the file at the display/printed size (enlarge neg to display size).
3 - Before sending, tweak the file to look its best at the smaller (or larger) size.
4 - Send ONLY this one for display/printing.

Merely resetting an image's display size does not create a good-quality small image. (Re-sizing in FrontPage, for example.) As the image size is reduced it also looks darker to the eye. The colors have not been darkened, they are just closer together. So as far as the numbers go the tones are the same, just scaled down. However, our eyes perceive this as darker. Also, because pixels were thrown away without adjustments, it may not only look murkier but less sharp all around.

When the server is asked to send the file, the full-size image is sent to the browser. There is no sizing at the server. When you specify a display size in width and height (as in resizing in FrontPage) this does not re-size the file. To get to the smaller size the browser (after downloading the entire full-size file) throws away pixels without intelligence. For example, if the display size is one-tenth the actual file's size the browser only keeps one in ten pixels - with no judgement on what is kept and what is discarded.

This means you just wasted download time on a larger image and you lost control and quality over your image in the process. Remember (again and again), setting a display size by resizing the picture in FrontPage (or other Web-Page Editor) does not change the size of the file which is sent to your visitor's browser.

Notice that when you resize a picture downward you usually want to lighten it to look better and generally increase contrast. This lightening and contrast adjustment allows the smaller picture to have an equivalent appearance as the larger picture. Also, a small amount of sharpening might be added. This is especially true for thumbnails. Thumbnails are used to reduce file size to make it easier to choose larger versions of pictures for display.

I've seen some sites in which the larger picture is displayed at a thumbnail size. This is a mis-understanding of how the small size is created for display. Using a large picture at a thumbnail size makes no sense because the entire larger picture has to be downloaded, so no time is saved. You may as well just show the pictures at full size from the start.

Units of Measurement for Pictures

DPI, PPI, Halftone, Frequency, Pixels and Resolution

These terms all represent units of measure. They are somewhat confused because they have meanings which have shifted over the years due to changes in technology. In addition, some of the meanings overlap in terms of usage.

Resolution - A measure of the ability to render small detail. In photography for years this was measured in "lines per inch" but also other measures such as DPI in terms of picture elements.

DPI - dots per inch - Originally referred to the number of halftone dots per inch (frequency, see below) then was also used for the number of smallest imaging elements on a printer or imagesetter. It can also refer to the number of picture elements per inch.

Dots-Per-Inch / Pixels-Per-Inch (measurement) - This is important for printing to paper or film where the paper or film is measured in inches. It gives you an idea of how fine the detail will be for each inch of image on paper. The representation of the image on the screen is seldom the exact size, and (so far) never the exact resolution as paper or film.

Pixels (measurement) - This is the only unit of measure you need to know when sizing images for the screen. The screen image size is measured in pixels only. This is separate from the physical size of the screen which is measured in inches or centimeters. Everything positioned on a screen or web page is positioned in pixels, not inches or centimeters.

Each pixel is the smallest information unit in an image and depending on the type and color depth of the image each pixel may contain:
grayscale information
red, green and blue information
cyan, magenta, yellow and black information
an index to a color table which holds the actual color settings. (GIFs)

Note: color depth: refers to the size of the data number specfying how much of any color is recorded. The larger the number the more shades of a color are differentiated. Eight-bit color can store 256 different shades because each byte (eight bits) can have a value from zero to 255.
8-bit color (one byte) can hold 256 values (zero to 255)
16-bit color (two bytes) can hold 65,536 values (zero to 65535) and
24-bit color (three bytes) can hold 16,777,216 values (zero to 16,777,215).
32-bit color (four bytes) can hold 4,294,967,296 values (zero to 4,294,967,295)

GIF color table for text item showing a small number of colors.

GIF color table for photograph showing many more colors. These are the colors derived from the original JPEG photograph. Notice that the color table is "Custom."

GIF color table for the above photograph in which the table derived from the original colors in the photographed is substituted by a "Black Body" set of colors. This shows that in a GIF all color definitions are contained within the color table. A single number at each pixel position refers back to a position in the color table. So changing which color table is being used changes all the colors. (unlike JPEGs in which each pixel holds its own color definition.)

GIF images use indexed color. a color table is part of the image. All the colors in the image are defined in the color table. Then each pixel is simply an index number which refers to the predefined color in the color table.

Haltone Dot - is a mechanical shading process in which totally black (or colored) dots produce an appearance of varying shades of gray or color by varying the dot size and printing the dots on white paper. The halftone method was invented in the late 1800's for photographs.

Frequency - The number of halftone dots per inch

PPI - pixels per inch - was intended to clear up confusion over usage of DPI. It is a partial success but most people still talk about DPI usually meaning PPI.

On a computer screen, inches make no sense at all for the image. Inches only make sense when figuring how it fits into the furniture.

Computer screen images themselves are measured in pixels and all positioning is based on pixels - not inches. So when you are making web pages you need to pay attention to the picture dimensions in pixels.

Inches make sense when you are printing to paper. This is when dots (pixels) per inch determine what kind of print quality you get on paper as well as how large the picture will be on paper.

-30-